<html lang="en">

<head>
  <style>
    html {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
    }

    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: rgb(54, 50, 119);
      align-items: center;
      justify-content: center;
      color: #fafafa;
    }

    .loading {
      text-align: center;
    }
  </style>

</head>

<body>
  <div class="loading">
    <div>
      <img
        src="" />
      <img
        src="" />
    </div>
    <h3>Loading &laquo; accordion - header &raquo; demo</h3>
  </div>
  <form id="mainForm" method="post" action="https://stackblitz.com/run?file=app/accordion-header.ts" target="_self">
    <input type="hidden" name="project[template]" value="angular-cli">
    <input type="hidden" name="project[title]" value="ng-bootstrap demo - Accordion - Header">
    <input type="hidden" name="project[description]"
      value="Example usage of the accordion widget from https://ng-bootstrap.github.io">
    <input type="hidden" name="project[dependencies]" value="{&#34;@angular/animations&#34;:&#34;^15.0.0&#34;,&#34;@angular/core&#34;:&#34;^15.0.0&#34;,&#34;@angular/common&#34;:&#34;^15.0.0&#34;,&#34;@angular/compiler&#34;:&#34;^15.0.0&#34;,&#34;@angular/compiler-cli&#34;:&#34;^15.0.0&#34;,&#34;@angular/platform-browser&#34;:&#34;^15.0.0&#34;,&#34;@angular/platform-browser-dynamic&#34;:&#34;^15.0.0&#34;,&#34;@angular/router&#34;:&#34;^15.0.0&#34;,&#34;@angular/forms&#34;:&#34;^15.0.0&#34;,&#34;@angular/localize&#34;:&#34;^15.0.0&#34;,&#34;@ng-bootstrap/ng-bootstrap&#34;:&#34;14.2.0&#34;,&#34;@popperjs/core&#34;:&#34;2.11.6&#34;,&#34;rxjs&#34;:&#34;~7.5.5&#34;,&#34;typescript&#34;:&#34;~4.8.4&#34;,&#34;zone.js&#34;:&#34;~0.11.4&#34;}">
    
    <input type="hidden" name="project[tags][]" value="angular">
    
    <input type="hidden" name="project[tags][]" value="bootstrap">
    
    <input type="hidden" name="project[tags][]" value="ng-bootstrap">
    
    <input type="hidden" name="project[tags][]" value="accordion">
    
    
    <input type="hidden" name="project[files][src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &#34;evergreen&#34; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
 * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import &#39;zone.js&#39;; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import &#39;@angular/localize/init&#39;;
">
    
    <input type="hidden" name="project[files][tsconfig.json]" value="{
	&#34;compileOnSave&#34;: false,
	&#34;compilerOptions&#34;: {
		&#34;baseUrl&#34;: &#34;./&#34;,
		&#34;outDir&#34;: &#34;./dist/out-tsc&#34;,
		&#34;sourceMap&#34;: true,
		&#34;declaration&#34;: false,
		&#34;downlevelIteration&#34;: true,
		&#34;experimentalDecorators&#34;: true,
		&#34;moduleResolution&#34;: &#34;node&#34;,
		&#34;importHelpers&#34;: true,
		&#34;target&#34;: &#34;es2020&#34;,
		&#34;module&#34;: &#34;es2020&#34;,
		&#34;typeRoots&#34;: [&#34;node_modules/@types&#34;],
		&#34;lib&#34;: [&#34;es2020&#34;, &#34;dom&#34;]
	},
	&#34;angularCompilerOptions&#34;: {
		&#34;enableIvy&#34;: true,
		&#34;fullTemplateTypeCheck&#34;: true,
		&#34;strictTemplates&#34;: true,
		&#34;strictInjectionParameters&#34;: true
	}
}
">
    
    <input type="hidden" name="project[files][angular.json]" value="{
	&#34;version&#34;: 1,
	&#34;newProjectRoot&#34;: &#34;projects&#34;,
	&#34;projects&#34;: {
		&#34;demo&#34;: {
			&#34;root&#34;: &#34;&#34;,
			&#34;sourceRoot&#34;: &#34;src&#34;,
			&#34;projectType&#34;: &#34;application&#34;,
			&#34;prefix&#34;: &#34;app&#34;,
			&#34;schematics&#34;: {},
			&#34;architect&#34;: {
				&#34;build&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:browser&#34;,
					&#34;options&#34;: {
						&#34;outputPath&#34;: &#34;dist/demo&#34;,
						&#34;index&#34;: &#34;src/index.html&#34;,
						&#34;main&#34;: &#34;src/main.ts&#34;,
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;assets&#34;: [],
						&#34;styles&#34;: [],
						&#34;scripts&#34;: []
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;fileReplacements&#34;: [{}],
							&#34;optimization&#34;: true,
							&#34;outputHashing&#34;: &#34;all&#34;,
							&#34;sourceMap&#34;: false,
							&#34;extractCss&#34;: true,
							&#34;namedChunks&#34;: false,
							&#34;aot&#34;: true,
							&#34;extractLicenses&#34;: true,
							&#34;vendorChunk&#34;: false,
							&#34;buildOptimizer&#34;: true
						}
					}
				},
				&#34;serve&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:dev-server&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;browserTarget&#34;: &#34;demo:build:production&#34;
						}
					}
				},
				&#34;extract-i18n&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:extract-i18n&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					}
				},
				&#34;test&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:karma&#34;,
					&#34;options&#34;: {
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;styles&#34;: [],
						&#34;scripts&#34;: [],
						&#34;assets&#34;: []
					}
				},
				&#34;lint&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:tslint&#34;,
					&#34;options&#34;: {
						&#34;tsConfig&#34;: [&#34;tsconfig.json&#34;],
						&#34;exclude&#34;: [&#34;**/node_modules/**&#34;]
					}
				}
			}
		}
	},
	&#34;defaultProject&#34;: &#34;demo&#34;
}
">
    
    <input type="hidden" name="project[files][src/index.html]" value="&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;ng-bootstrap demo - Accordion - Header&lt;/title&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css&#34; /&gt;
  &lt;style&gt;
    /* Sortable table demo */

th[sortable] {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

th[sortable].desc:before,
th[sortable].asc:before {
	content: &#39;&#39;;
	display: block;
	background: url(&#39;&#39;)
		no-repeat;
	background-size: 22px;
	width: 22px;
	height: 22px;
	float: left;
	margin-left: -22px;
}

th[sortable].desc:before {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
	background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
	background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
	position: relative;
	height: 0;
	padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .picsum-img-wrapper &gt; img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&#34;container-fluid&#34;&gt;

    &lt;hr&gt;

    &lt;p&gt;
      This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
      Visit &lt;a href=&#34;https://ng-bootstrap.github.io/&#34; target=&#34;_blank&#34;&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
      widgets and demos.
    &lt;/p&gt;

    &lt;hr&gt;
    &lt;ngbd-accordion-header&gt;&lt;/ngbd-accordion-header&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
">
    
    <input type="hidden" name="project[files][src/main.ts]" value="import &#39;./polyfills&#39;;
import {bootstrapApplication} from &#39;@angular/platform-browser&#39;;
import {NgbdAccordionHeader} from &#39;./app/accordion-header&#39;;

bootstrapApplication(NgbdAccordionHeader)
.then(ref =&gt; {
  // Ensure Angular destroys itself on hot reloads.
  if (window[&#39;ngRef&#39;]) {
    window[&#39;ngRef&#39;].destroy();
  }
  window[&#39;ngRef&#39;] = ref;

  // Otherwise, log the boot error
})
.catch(err =&gt; console.error(err));
">
    
    <input type="hidden" name="project[files][src/app/accordion-header.html]" value="&lt;div ngbAccordion #accordion=&#34;ngbAccordion&#34;&gt;
	&lt;div ngbAccordionItem=&#34;first&#34; #first=&#34;ngbAccordionItem&#34; [collapsed]=&#34;false&#34;&gt;
		&lt;div ngbAccordionHeader class=&#34;accordion-button custom-header justify-content-between&#34;&gt;
			&lt;p class=&#34;m-0&#34;&gt;First panel - {{ first.collapsed ? &#39;collapsed&#39; : &#39;opened&#39; }}&lt;/p&gt;
			&lt;button ngbAccordionToggle class=&#34;btn btn-link p-0&#34;&gt;Toggle first&lt;/button&gt;
		&lt;/div&gt;
		&lt;div ngbAccordionCollapse&gt;
			&lt;div ngbAccordionBody&gt;
				&lt;ng-template&gt;
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
					officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
					moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
					keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
					butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
					haven&#39;t heard of them accusamus labore sustainable VHS.
				&lt;/ng-template&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div ngbAccordionItem=&#34;second&#34;&gt;
		&lt;div ngbAccordionHeader class=&#34;accordion-button custom-header justify-content-between&#34;&gt;
			&lt;p class=&#34;m-0&#34;&gt;Second panel&lt;/p&gt;
			&lt;div&gt;
				&lt;button ngbAccordionToggle class=&#34;btn btn-sm btn-outline-primary ms-2&#34;&gt;Toggle second&lt;/button&gt;
				&lt;button type=&#34;button&#34; class=&#34;btn btn-sm btn-outline-secondary ms-2&#34; (click)=&#34;third.disabled = !third.disabled&#34;&gt;
					{{ third.disabled ? &#39;En&#39; : &#39;Dis&#39; }}able third
				&lt;/button&gt;
				&lt;button type=&#34;button&#34; class=&#34;btn btn-sm btn-outline-danger ms-2&#34; (click)=&#34;accordion.collapseAll()&#34;&gt;
					Collapse all
				&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div ngbAccordionCollapse&gt;
			&lt;div ngbAccordionBody&gt;
				&lt;ng-template&gt;
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
					officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
					moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
					keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
					butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
					haven&#39;t heard of them accusamus labore sustainable VHS.
				&lt;/ng-template&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div ngbAccordionItem=&#34;third&#34; #third=&#34;ngbAccordionItem&#34; [class.disabled]=&#34;third.disabled&#34;&gt;
		&lt;div ngbAccordionHeader class=&#34;accordion-button custom-header&#34;&gt;
			&lt;button ngbAccordionToggle [disabled]=&#34;third.disabled&#34; class=&#34;p-0 btn btn-link container-fluid text-start ps-0&#34;&gt;
				Third panel
			&lt;/button&gt;
			&lt;p *ngIf=&#34;third.disabled&#34; class=&#34;text-muted m-0 small&#34;&gt;[I&#39;m&amp;nbsp;disabled]&lt;/p&gt;
		&lt;/div&gt;
		&lt;div ngbAccordionCollapse&gt;
			&lt;div ngbAccordionBody&gt;
				&lt;ng-template&gt;
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
					officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
					moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
					keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
					butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
					haven&#39;t heard of them accusamus labore sustainable VHS.
				&lt;/ng-template&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
">
    
    <input type="hidden" name="project[files][src/app/accordion-header.ts]" value="import { Component, ViewEncapsulation } from &#39;@angular/core&#39;;
import { NgbAccordionModule } from &#39;@ng-bootstrap/ng-bootstrap&#39;;
import { NgIf } from &#39;@angular/common&#39;;

@Component({
	selector: &#39;ngbd-accordion-header&#39;,
	standalone: true,
	imports: [NgbAccordionModule, NgIf],
	templateUrl: &#39;./accordion-header.html&#39;,
	encapsulation: ViewEncapsulation.None,
	styles: [
		`
			.custom-header::after {
				content: none;
			}
		`,
	],
})
export class NgbdAccordionHeader {}
">
    
  </form>
  <script>document.getElementById("mainForm").submit();</script>
</body>

</html>
